<template>
    <video ref="rVideoPlayer" class="video-js vjs-default-skin"></video>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import videoJs from 'video.js'
const props = defineProps({
    options: {
        type: Object,
        default: () => ({}),
    },
    isPlay: {
        type: Boolean
    },
    togglePlay: {}
})

let player = ref()
let value = ref<number>(0)
let currentTimeValue = ref<number>(0)
let duration = ref<number>(0)
let timer = ref<any>(null)

const rVideoPlayer = ref<Element>()
const emit = defineEmits(["alertSome"])



const play = () => {
    player.value.play()
}

const pause = () => {
    player.value.pause()
}

const restart = (num: number = 0) => {
    let playTime = num / 100 * duration.value
    player.value.currentTime(playTime)
}

const currentTime = () => {
    // currentTimeValue.value = player.value.currentTime()
    // duration.value = player.value.duration()
    // console.log(player.value.remainingTime());
    console.log(player.value.currentTime());
}

defineExpose({
    play,
    pause,
    currentTime,
    restart,
    value
})

timer.value = setInterval(() => {
    duration.value = player.value.duration()
    currentTimeValue.value = player.value.currentTime()
    // console.log(player.value.remainingTime());

    value.value = Math.floor((currentTimeValue.value / duration.value * 100))

    if (value.value == 100) {
        value.value = 0
        clearInterval(timer.value);// 满足条件时 停止计时
    }
}, 800)

onMounted(() => {
    player.value = videoJs(rVideoPlayer.value as Element, props.options, () => {
        // player.value.log("play.....")
    })

})

onUnmounted(() => {
    if (player.value) {
        player.value.dispose()
    }
    clearInterval(timer.value)
})
</script>
